<template>
    <ul class="tab-bar">
      <li
        is="router-link"
        tag="li"
        v-for="route in navs"
        :key="route.path"
        :to="route.path"
      >
        <i class="iconfont" v-html="route.meta.icon"></i>
        <span>{{route.meta.title}}</span>
      </li>
       <!-- <li>
        <i class="iconfont">&#xe667;</i>
        <span>发现</span>
      </li>
       <li>
        <i class="iconfont">&#xe660;</i>
        <span>菜单</span>
      </li>
       <li>
        <i class="iconfont">&#xe663;</i>
        <span>预约</span>
      </li>
       <li>
        <i class="iconfont">&#xe66c;</i>
        <span>我的</span>
      </li> -->
    </ul>
</template>

<script>
import routes from '@/router/routes'
export default {
  name: 'TabBar',
  computed: {
    navs() {
      return routes.filter(route => route.meta && route.meta.isTabBar)
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 2073759 */
  src: url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.eot');
  src: url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.woff') format('woff'),
  url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2073759_nckn2uvmlr.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.tab-bar {
  display: flex;
  height: 50px;
  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
  }
  .router-link-exact-active,
  .router-link-active {
    i {
      color:  #fc3;
    }
  }
}
</style>
